<template>
  <div class="container_box" id="video_box">
    <!-- <div class="van_swipe"> -->
    <full-page :options="options">
      <div class="page-wp" v-if="videoList.length!==0">
        <div  v-for="(item, index) in videoList" :key="index" class="section">
          <video
            ref="videoRef"
            class="video-content"
            :src="item.url"
            loop
            webkit-playsinline="true"
            x5-video-player-type="h5-page"
            x5-video-player-fullscreen="true"
            playsinline
            preload="auto"
            fullscreen="true"
            @click="togglePlay(index)"
          ></video>
          <img
            v-show="iconPlayShow"
            class="icon_play"
            @click="playvideo(index)"
            src="http://npjy.oss-cn-beijing.aliyuncs.com/images/file-1575340653940esdHR.png"
          />

          <img
            v-if="isMute"
            class="icon_volumn"
            @click="cancelMute(index)"
            src="../assets/mute.png"
          />
          <img v-else class="icon_mute" @click="muteVideo(index)" src="../assets/volumn.png" />
        </div>
      </div>
    </full-page>
    <!-- <van-swipe :show-indicators="false" @change="onChange" vertical :loop="false">
                <van-swipe-item v-for="(item, index) in videoList" :key="index" class="product_swiper">
                    <div class="video_container">
                        <video class="video_box" 
                        :src="item.url" 
                        loop >
                        </video>
                        <img v-show="iconPlayShow" class="icon_play" @click="playvideo"
                             src="http://npjy.oss-cn-beijing.aliyuncs.com/images/file-1575340653940esdHR.png"/>
                    </div>
                </van-swipe-item>
    </van-swipe>-->
    <!-- </div> -->
  </div>
</template>
 
<script>
import http from "../utils/http";
import api from "../utils/api";
// https://favorre.com/favorre/getVideos?offset=0&limit=5
// https://cnodejs.org/api/v1/topic/5433d5e4e737cbe96dcef312

//   import Vue from "vue";
//   import {
//       Swipe,
//       SwipeItem,
//       Toast
//   } from 'vant';
//     Vue.use(Swipe, Toast).use(SwipeItem);
//  let videoProcessInterval;

export default {
  name: "Home",
  data() {
    return {
      offset: 0,
      limit: 5,
      isMute: false,
      isPlaying: false,
      current: 0,
      iconPlayShow: true,
      opts: {
        start: 0,
        dir: "v",
        duration: 500
      },
      videoList: [
        {
          id: "",
          name: "",
          url:
            "",
          productIds: []
        },
        // {
        //   id: "16",
        //   name: "food",
        //   url:
        //     "http://video.jishiyoo.com/549ed372c9d14b029bfb0512ba879055/8e2dc540573d496cb0942273c4a4c78c-15844fe70971f715c01d57c0c6595f45-ld.mp4",
        //   productIds: []
        // },
        // {
        //   id: "17",
        //   name: "fooddddddd",
        //   url: "https://dd2frg8k1z1bg.cloudfront.net/changxiugongzhu.mp4",
        //   productIds: []
        // },
        // {
        //   id: "18",
        //   name: "click ",
        //   url: "https://dd2frg8k1z1bg.cloudfront.net/xinkuanqinzizhuang.mp4",
        //   productIds: []
        // },
        // {
        //   id: "19",
        //   name: "oclick ",
        //   url:
        //     "https://dd2frg8k1z1bg.cloudfront.net/jiaronglianyiqundongzhuang.mp4",
        //   productIds: []
        // },
        // {
        //   id: "20",
        //   name: "book ",
        //   url:
        //     "https://dd2frg8k1z1bg.cloudfront.net/cesuoduogongnengchuangyi.mp4",
        //   productIds: []
        // }

      ],
      options: {
        licenseKey: "OPEN-SOURCE-GPLV3-LICENSE",
        afterLoad: this.afterLoad,
        scrollBar: false,
        menu: "#menu"
        // navigation: true,
        // anchors: ['page1', 'page2', 'page3']
      }
    };
  },
  created() {
      this.$nextTick(function () {
    this.fetchData();
      })
  },
  computed: {
    // generateRef(index){
    //     return `ref${index}`
    // }
  },

  watch: {
    current() {
      if (this.current == this.videoList.length - 2) {
        this.offset += 5;
        this.fetchData();
      }
    }
  },
  methods: {
    fetchData: async function() {
      console.log("进入fetch");
      let params = {
        offset: this.offset,
        limit: this.limit
      };
      const res = await http.get(api.right, params);
      console.log("res", res.data.data);
      if (res.data.code == 200) {
        console.log("请求成功", res.data.data);
        this.videoList = res.data.data;
        console.log("videoList", this.videoList);
      }
    },
    cancelMute(index) {
      this.isMute = false;
      this.$refs.videoRef[index].volume = 0.5;
    },
    muteVideo(index) {
      this.isMute = true;
      this.$nextTick(() => {
        //调整音量为0
        this.$refs.videoRef[index].volume = 0;
      });
    },
    togglePlay(index) {
      console.log("播放状态", this.isPlaying);
      if (this.isPLaying == false) {
        // debugger
        console.log("开始播放");
        console.log("所有视频", this.$refs.videoRef)
        let audio =  this.$refs.videoRef[index]
        let playPromise = audio.play();
        if (playPromise !== undefined) {
          playPromise
            .then(() => {
              audio.play();
            })
            .catch((res) => {
              console.log("播放错误",res)
            });
        }
       
        this.iconPlayShow = false;
      } else if (this.isPLaying == true) {
        // debugger
        console.log("开始暂停");
        this.$refs.videoRef[index].pause();
        this.iconPlayShow = true;
      }
      this.isPLaying = !this.isPLaying;
    },
    afterLoad(anchorLink, item) {
      this.iconPlayShow = true;
      this.isPlaying = false;
      console.log("onAfterLoad", item.index);
      this.current = item.index;
      console.log("this.$refs.input1", this.$refs.videoRef[item.index]);
      //  this.$refs.videoRef[item.index].play()
    },
    // onChange(index) {
    //   //改变的时候 暂停当前播放的视频
    //   clearInterval(videoProcessInterval);
    //   this.videoProcess = 0;
    //   let video = document.querySelectorAll("video")[this.current];
    //   video.pause();
    //   this.playOrPause = false;
    //   this.showShareBox = false;
    //   this.current = index;
    //   console.log("current", this.current)
    //   //切换直接自动播放下一个
    //   this.isVideoShow = false;
    //   setTimeout(() => {
    //     this.pauseVideo();
    //   }, 100);
    // },

    // 开始播放
    playvideo(index) {
      console.log("isPlaying", this.isPlaying);
      console.log("playvideo：" + this.current);
      this.$refs.videoRef[index].play();
      this.iconPlayShow = false;
      this.isPLaying = true;
      // this.isVideoShow = false;
      // this.iconPlayShow = false;
      // this.showShareBox = false;
      // video.play();
      // window.onresize = function () {
      //     video.style.width = window.innerWidth + "px";
      //     video.style.height = window.innerHeight + "px";
      // }

      // videoProcessInterval = setInterval(() => {
      //     this.changeProcess(video)
      // }, 100)
    }
  }
};
</script>
 
<style>
.video-content {
  /* object-fit: fill !important; */
  /* z-index: 999; */
  /* position:relative; */
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
  overflow: hidden;
}
.page-wp {
  height: 667px;
}
.section {
  position: relative;
  height: 100%;
}
.icon_play {
  position: absolute;
  top: 44%;
  right: 0;
  left: 0;
  bottom: auto;
  margin: auto;
  z-index: 999;
  height: 60px;
  /* background: rgba(0, 0, 0, 0.5); */
  border-radius: 50%;
}
.video_box {
  object-fit: fill;
  z-index: 999;
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  top: 20px;
  background: #000;
  overflow: hidden;
}
.product_swiper {
  width: 100vw;
  height: 100vh;
}
.van_swipe {
  width: 100vw;
  height: 100vh;
  max-width: 550px;
  margin: 0 auto;
  position: relative;
}

.clear {
  clear: both;
}

.video-player {
  height: 100vh;
  width: 100vw;
}

.product_swiper {
  width: 100vw;
  height: 100vh;
}

.van_swipe {
  width: 100vw;
  height: 100vh;
  max-width: 550px;
  margin: 0 auto;
  position: relative;
}

.van-swipe {
  width: 100%;
  height: 100%;
}

.container_box {
  width: 100vw;
  height: 100vh;
  background: #000;
}

.video_box {
  object-fit: fill !important;
  z-index: 999;
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
  overflow: hidden;
}

video {
  object-position: 0 0;
}

.icon_play {
  position: absolute;
  top: 44%;
  right: 0;
  left: 0;
  bottom: auto;
  margin: auto;
  z-index: 999;
  height: 60px;
  background: rgba(0, 0, 0, 0.5);
  border-radius: 50%;
}
.video_box {
  object-fit: contain !important;
  z-index: 999;
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  top: 20px !important;

  overflow: hidden;
}
.icon_mute {
  position: absolute;
  top: 40%;
  right: 5px;
  left: 10px;
  bottom: auto;
  /* margin: auto; */
  z-index: 999;
  height: 30px;
  width: 30px;
  /* background: rgba(0, 0, 0, 0.5); */
  border-radius: 50%;
}
.icon_volumn {
  position: absolute;
  top: 40%;
  right: 5px;
  left: 10px;
  bottom: auto;
  /* margin: auto; */
  z-index: 999;
  height: 30px;
  width: 30px;
  /* background: rgba(0, 0, 0, 0.5); */
  border-radius: 50%;
}
</style>





